<!--
* description: 自定义下拉选项下拉框组件
* author: liyk
* createDate：2020/01/03
-->
<template>
  <el-col :span="span" v-if="curIsShow" style="height: 26px;">
    <lableName
      :validrule="validrule"
      :curLabelName="curLabelName"
      :isShowLabel="isShowLabel"
      :isRequire="isRequire"
      :maxWordCount="dataToObject==null ? 6 :dataToObject.maxWordCount"
      :labelWidth="labelWidth"
    ></lableName>
    <el-select
      :multiple="isMul"
      collapse-tags
      :filterable="filterable"
      v-model="modelCode"
      :placeholder="placeholder"
      @clear="clearCode"
      :clearable="clearable"
      @change="sendCode"
      :disabled="disabled"
      size="small"
      value-key="id"
      :style="{'width': ( `calc(100% - ${labelWidth+slotWidth}px)`)}"
    >
      <el-option
        v-for="item in optionDatas"
        :key="item.id"
        :label="item.label"
        :value="item.value"
      >{{item.label}}</el-option>
    </el-select>
    <validateFormate :curLabelName="curLabelName" :validrule="validrule"></validateFormate>
    <slot v-if="isSlot === true" :name="slotName" />
  </el-col>
</template>
<script>
import { dropdownMixins } from "@/components/wms/mixins/dropdownMixins";
export default {
  name: "dropdownList",
  mixins: [dropdownMixins],
  components: {
    lableName: () => import("@/components/lableName"), //标题溢出样式组件
    validateFormate: () => import("@/components/validateFormate") //校验提示样式组件
  },
  props: {
    isSlot: { type: Boolean, default: false },
    slotName: { type: String, default: "" },
    labelWidth: { type: Number, default: 90 },
    slotWidth: { type: Number, default: 80 }
  },
  data() {
    return {
      placeholder: this.$t("sys.tips.esTip0"),
      optionDatas: this.options,
      curLabelName: this.labelName === "" ? "我是下拉框" : this.labelName
    };
  },
  methods: {}
};
</script>

<style scoped>
.filter-params .el-col .el-select {
  width: calc(100% - 170px);
}
.el-col-12 {
  width: 100%;
}
</style>
